<template>
  <div>
    <header class="header">
      <div class="header_item">
        <image
        @click="handleLink(link)"
          class="header_img"
          :src="img"
        />
        <h1 class="name">{{name}}</h1>
        <p>{{type}}</p>
      </div>
    </header>
    <!-- 导航 -->
    <div class="content">
      <div class="content_item" v-for="item in menu" :key="item.id" @click="handleLink(item.link)">
        <image class="content_img" :src="item.icon" />
        <p class="toRight">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '测试助理',
      type: '高级助理',
      img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3165862407,3625382219&fm=26&gp=0.jpg",
      link:"../my_info/main",

      menu: [
        {
          id: 0,
          name: '个人信息设置',
          link: '../my_doctor',
          icon: '../../../static/images/user.png'
        },
        {
          id: 1,
          name: '服务的医生',
          link: '',
          icon: '../../../static/images/user.png'
        },
        {
          id: 2,
          name: '服务的患者',
          link: '',
          icon: '../../../static/images/user.png'
        },
        {
          id: 3,
          name: '意见反馈',
          link: '',
          icon: '../../../static/images/user.png'
        },

      ]
    }
  },
  methods: {
    handleLink(url) {
      console.log(url)
      wx.navigateTo({ url })
    }
  },
  mounted(){
    console.log(1)
  }
}
</script>
<style  scoped>
.header {
  height: 400rpx;
  background: linear-gradient(#366ae7, #5e60ea);
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-end;
}
.header_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.header_img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.name {
  font-size: 50rpx;
}
.content {
  margin-top: 40rpx;
}
.content_item {
  position: relative;
  height: 120rpx;
  line-height: 120rpx;

  display: flex;
  align-items: center;
}
.content_img {
  width: 100rpx;
  height: 100rpx;
}
.content_item p {
  flex: 1;
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-size: 40rpx;
  border-bottom: 1rpx solid #dddddd;
}
</style>